<template>
    <div class="app-container">
        <el-form inline>
            <el-form-item label="会员ID">
                <el-input v-model="filterParams.memberId" placeholder="请输入"/>
            </el-form-item>
            <el-form-item label="手机号">
                <el-input v-model="filterParams.mobileNumber" placeholder="请输入"/>
            </el-form-item>
            <el-form-item label="支付平台">
                <el-select style="width: 300px;" v-model="filterParams.platformCode">
                    <el-option label="全部" value=""></el-option>
                    <el-option label="中金" value="ZHONG_JIN"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="状态">
                <el-select v-model="filterParams.memberStatus" style="width: 300px;">
                    <el-option v-for="item, index in auditStatus" :label="item.text" :value="Number(index)"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="getAccountListData">查询</el-button>
                <el-button pinia @click="reset">重置</el-button>
            </el-form-item>
        </el-form>
        <div class="table">
            <el-table :data="accountList">
                <el-table-column label="账户ID" prop="memberId"></el-table-column>
                <el-table-column label="名称" prop="memberName"></el-table-column>
                <el-table-column label="商户号" prop="merchantName"></el-table-column>
                <el-table-column label="支付平台" prop="platformName"></el-table-column>
                <el-table-column label="开户类型" prop="memberType">
                    <template #default="{ row }">
                        {{ memberType[row.memberType] }}
                    </template>
                </el-table-column>
                <el-table-column label="唯一识别码" prop="identityNo"></el-table-column>
                <el-table-column label="支付绑定手机号" prop="mobileNumber"></el-table-column>
                <el-table-column label="状态" prop="num">
                    <template #default="{ row }">
                        <el-tag :type="auditStatus[row.memberStatus].type">
                            {{ row.memberStatusName }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="创建人" prop="createBy"></el-table-column>
                <el-table-column label="创建时间" prop="createTime"></el-table-column>
                <el-table-column label="操作" prop="oparate">
                    <template #default="{ row }">
                        <el-button link type="primary" @click="viewDetails(row)">查看</el-button>
                    </template>
                </el-table-column>
                <template #empty>
                    <el-empty></el-empty>
                </template>
            </el-table>
        </div>
        <div class="pagination">
            <el-pagination v-model:current-page="filterParams.current" v-model:page-size="filterParams.size"
                :page-sizes="[10, 20, 50, 100]" layout="total, sizes, prev, pager, next, jumper" :total="total"
                @size-change="getAccountListData" @current-change="getAccountListData" />
        </div>
        <el-dialog v-model="detailsVisible" title="账户详情" :width="600" align-center>
            <el-scrollbar max-height="60vh">
                <div class="detail">
                    <template v-for="item in detailList[detailType]">
                        <div class="detail-item" v-if="!item.type">
                            <div class="detail-item-title">{{ item.label }}</div>
                            <div class="detail-item-content">{{ detail[item.value] }}</div>
                        </div>
                        <div class="detail-item" v-else>
                            <div class="detail-item-title">{{ item.label }}</div>
                            <div class="detail-item-content">
                                <img :src="detail[item.value]" alt="">
                            </div>
                        </div>
                    </template>
                </div>
            </el-scrollbar>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { getAccountList, getMemberDetail } from "@/api/finance/queryAccount";
import { individual, enterprise, selfEmployed } from "./detailConfig";
const filterParams = ref({
    current: 1,
    size: 10,
    platformCode: 'ZHONG_JIN'
})
const detailsVisible = ref(false);
const accountList = ref([]);
const auditStatus = {
    0: {
        text: '审核中',
        type: 'warning'
    },
    1: {
        text: '审核成功',
        type: 'success'
    },
    2: {
        text: '审核失败',
        type: 'denger'
    },
    3: {
        text: '已绑定',
        type: 'primary'
    },
    4: {
        text: '已签约',
        type: 'success'
    }
}
const memberType = {
    1: '个人',
    2: '公司',
    3: '平台'
}
const reset = () => {
    filterParams.value = {
        size: 10,
        current: 1,
        platformCode: 'ZHONG_JIN',
    }
    getAccountListData()
}
const total = ref(0)
const getAccountListData = async () => {
    try {
        const res = await getAccountList(filterParams.value)
        accountList.value = res.data.list;
        total.value = res.data.total;
    } catch (error) {

    }
}
const detailType = ref(1);
const detailList = {
    1: individual,
    2: enterprise,
    3: selfEmployed
}
const detailKey = {
    1: 'individualMember',
    2: 'enterpriseMember',
    3: 'soleProprietorshipMember'
}
const detail = ref({})
const viewDetails = async (row) => {
    detailType.value = row.memberType;
    try {
        const res = await getMemberDetail({ walletId: row.walletId })
        detail.value = res.data[detailKey[row.memberType]];
        detailsVisible.value = true;
    } catch (error) {

    }
}
onMounted(() => {
    getAccountListData()
})
</script>

<style lang="scss" scoped>
.pagination {
    display: flex;
    justify-content: end;
    margin-top: 20px;
}

.detail {

    .detail-item {
        display: flex;
        justify-content: space-between;
        min-height: 40px;

        img {
            width: 100px;
            height: 100px;
        }
    }
}
</style>